import 'package:flutter/material.dart';
import 'package:private_journey/States.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart' as shadcn;

class SettingsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SettingsPageState();
  }
}

class ColorSchemeData {
  String name;
  shadcn.ColorScheme colorScheme;

  ColorSchemeData({required this.name, required this.colorScheme});
}

class SettingsPageState extends State<SettingsPage> {
  ColorSchemeData? selectedValue;

  @override
  Widget build(BuildContext context) {
    return shadcn.Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: shadcn.Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('change theme').medium,
              shadcn.Select<ColorSchemeData>(
                itemBuilder: (context, item) {
                  return Text(item.name);
                },
                popupConstraints: const BoxConstraints(
                  maxHeight: 300,
                  maxWidth: 200,
                ),
                onChanged: (value) {
                  currentColorScheme.value = value!.colorScheme;
                  setState(() {
                    selectedValue = value;
                  });
                },
                value: selectedValue,
                placeholder: Text('choose a color'),
                popupWidthConstraint: shadcn.PopoverConstraint.flexible,
                popup: shadcn.SelectPopup(
                  shrinkWrap: true,
                  items: shadcn.SelectItemList(
                    children: [
                      shadcn.SelectItemButton(
                        value: ColorSchemeData(
                          name: 'lightGreen',
                          colorScheme: shadcn.ColorSchemes.lightGreen(),
                        ),
                        child: Row(
                          spacing: 10,
                          children: [
                            ColoredBox(
                              color: shadcn.ColorSchemes.lightGreen().primary,
                              child: shadcn.Container(width: 20, height: 20),
                            ),
                            Text('lightGreen'),
                          ],
                        ),
                      ),
                      shadcn.SelectItemButton(
                        value: ColorSchemeData(
                          name: 'darkGreen',
                          colorScheme: shadcn.ColorSchemes.darkGreen(),
                        ),
                        child: Row(
                          spacing: 10,
                          children: [
                            ColoredBox(
                              color: shadcn.ColorSchemes.darkGreen().primary,
                              child: shadcn.Container(width: 20, height: 20),
                            ),
                            Text('darkGreen'),
                          ],
                        ),
                      ),
                      shadcn.SelectItemButton(
                        value: ColorSchemeData(
                          name: 'darkBlue',
                          colorScheme: shadcn.ColorSchemes.darkBlue(),
                        ),
                        child: Row(
                          spacing: 10,
                          children: [
                            ColoredBox(
                              color: shadcn.ColorSchemes.darkBlue().primary,
                              child: shadcn.Container(width: 20, height: 20),
                            ),
                            Text('darkBlue'),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}
